<div [class]="typeClass() + sizeClass() + disabledClass() + appendClass() + prependClass() + prefixClass() +suffixClass() + parentClass "
    (hovering)="hovering = true" (mouseleave)="hovering = false">
    <ng-container *ngIf="!(type === 'textarea')">
        <!-- 前置元素 -->
        <div class="el-input-group__prepend" *ngIf="prepend">
            <ng-template [ngTemplateOutlet]="prepend"> </ng-template>
        </div>
        <input class="el-input__inner" [autocomplete]="autoComplete" [value]="value" [name]="name" [type]="getNativeType()"
            [placeholder]="placeholder" [autofocus]="autofocus" [disabled]="disabled" [readonly]="readonly"
            [maxlength]="maxlength" [minlength]="minlength" [ngModel]="model" (ngModelChange)="handleInput($event)"
            (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
        <!-- 前置内容 -->
        <span class="el-input__prefix" *ngIf="prefixIcon||prefix">
            <ng-template [ngTemplateOutlet]="prefix"> </ng-template>
            <el-icon *ngIf="prefixIcon" [iconName]="prefixIcon" class="el-input__icon "></el-icon>
        </span>
        <!-- 后置内容 -->
        <span class="el-input__suffix" *ngIf="getSuffixVisible()">
            <span class="el-input__suffix-inner">
                <ng-container *ngIf="getSuffixTmpVisible()">
                    <ng-template [ngTemplateOutlet]="suffix"> </ng-template>
                    <el-icon *ngIf="suffixIcon" [iconName]="suffixIcon" class="el-input__icon "></el-icon>
                </ng-container>
                <el-icon *ngIf="showClear()" iconName="el-icon-circle-close" class="el-input__icon el-input__clear"
                    (click)="clear($event)"></el-icon>
                <el-icon *ngIf="showPwdVisible()" iconName="el-icon-view" class="el-input__icon el-input__clear"
                    (click)="handlePasswordVisible($event)"></el-icon>
                <span *ngIf="isWordLimitVisible()" class="el-input__count">
                    <span class="el-input__count-inner">
                        {{ textLength() }}/{{ maxlength }}
                    </span>
                </span>
            </span>
        </span>
        <!-- 后置元素 -->
        <div class="el-input-group__append" *ngIf="append">
            <ng-template [ngTemplateOutlet]="append"> </ng-template>
        </div>
        
    </ng-container>
    <ng-container *ngIf="type === 'textarea'">
        <textarea class="el-textarea__inner" #textarea [style]="textareaStyles" [value]="value" [name]="name"
            [placeholder]="placeholder" [autofocus]="autofocus" [disabled]="disabled" [readonly]="readonly"
            [maxlength]="maxlength" [minlength]="minlength" [ngModel]="model" (input)="handleTextarea($event)"
            (focus)="handleFocus($event)" (blur)="handleBlur($event)">
        </textarea>
        <span *ngIf="isWordLimitVisible()" class="el-input__count">{{ textLength() }}/{{ maxlength }}</span>

    </ng-container>